<template>
	<view class="edit-data">
		<view class="image">
			<u-avatar
			:src="user.image"
			:text="user.text"
			shape="square"
			size="90"
			bg-color="#0188FE"
			style="border-radius:20%;"
			>	
			</u-avatar>
		</view>
		<view class="name">
			<text>{{user.userName}}</text>
		</view>
		
		<view class="info">
			<!-- 弹出层组件 -->
			<u-popup
			:show="show"
			@open="open()"
			@close="close()"
			mode="bottom"
			:round="10"
			>
			<!-- 弹出层内容 -->
			<view class="pop">
				<view class="title">
					<text>选择高校</text>
				</view>
				<view class="icon">
					<u-icon size="20" name="/static/user/dynamic/deparment.png"></u-icon>
				</view>
				<view class="school">
					<text>{{user.school}}</text>
				</view>
				
				<view class="cancel">
					
				</view>
				<button @click="close()">取消</button>
			</view>
			</u-popup>
			<view class="group">
				<u-cell-group :border="false">
					<u-cell
					title="高校"
					titleStyle="font-size:20px;font-family: 宋体; font-weight:600;padding-top:2%;padding-bottom:2%"
					:value="user.school"
					@click="open()"
					isLink
					></u-cell>
					<u-cell
					title="职务"
					titleStyle="font-size:20px;font-family: 宋体; font-weight:600;padding-top:2%;padding-bottom:2%"
					value="暂无职务"
					>	
					</u-cell>
					<u-cell
					title="公开展示公司及职位信息"
					titleStyle="font-size:20px;font-family: 宋体; font-weight:600;padding-top:2%;padding-bottom:2%"
					>
						<view 
						slot="value"
						>
							<u-switch v-model="value"></u-switch>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
			<view class="prompt">
				<text>完善个人信息并开启可见有助于结识更多人脉</text>
			</view>
		</view>
		<view class="submit">
			<button @click="submit()">完成</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				value:false,
				show:false,
				user:{
					userId:0,
					userName:'陈健华',
					image:'',
					school:'玉林师范学院',
					text:'健华',
				}
			}
		},
		methods:{
			open(){
				this.show = true;
			},
			close(){
				this.show = false;
			},
			submit(){
				//将数据发送到后端 
				if(code===200){ //成功
					//路由到上一个界面 
				}else{	//失败
					//逻辑代码
				}
			}
			
		}
	}
	
</script>

<style lang="less">
	.edit-data{
		height: 100%;
		width: 100%;
		border-top: 1px solid #464646;
		.image{
			height: 100%;
			margin-top: 8%;
			margin-left: 41%;
		}
		.name{
			font-size: 20px;
			margin-left: 43.5%;
			margin-top: 2%;
		}
		.info{
			margin-top: 5%;
			.pop{
				height: 400px;
				width: 100%;
				.title{
					margin-top: 3%;
					padding-bottom: 3%;
					border-bottom: 1px solid #b4b4b4;
					text{
						font-size: 20px;
						font-weight: 550;
						margin-left: 45%;
					}
				}
				.icon{
					float: left;
					margin-left: 5%;
					margin-top: 3%;
					height: 8%;
					width: 6%;
					background-color: #86CAFC;
					border-radius: 5px;
					padding-left: 1.2%;
					padding-top: 1%;
				}
				.school{
					margin-left: 14%;
					margin-top: 4%;
					padding-bottom: 3%;
					border-bottom: 1px solid #b4b4b4;
					text{
						font-size: 20px;
						font-weight: 540;
					}
				}
				.cancel{
					margin-top: 43%;
					border-bottom: 10px solid #EDEDED;
				}
				button{
					background-color: white;
				}
				button::after{
					border: none;
				}
			}
			.group{
				margin-left: 2%;
			}
			.prompt{
				margin-top: 2%;
				margin-left: 2%;
				text{
					color: #CACACA;
				}
			}
		}
		.submit{
			margin-left: 5%;
			margin-top: 65%;
			width: 90%;
			button{
				color: white;
				font-family: "黑体";
				background-color: #0188FE;
				border-radius: 5px;
			}
			button::after{
				border: none;
			}
		}
	}
</style>